<template>
	<div class="foot-wap" @click="closeMenu">
		<div class="foot-wap-item" :class="[value == index ? 'active' : '', item.isExpect ? 'expect' : '', `item${index}`]" v-for="(item, index) in list" :key="index" @click.stop="Link(item)">
			<image class="img" v-if="value == index" :src="item.activeImg" alt="" mode="aspectFit" />
			<image class="img" v-else :src="item.img" alt="" mode="aspectFit" />
			<p v-if="item.name">{{ item.name }}</p>
			<!-- <div class="expect" v-if="item.isExpect">
                {{ En ? 'Expect' : '敬请期待' }}
            </div> -->
		</div>
		<sub-menu v-if="showMenu"></sub-menu>
	</div>
</template>

<script>
	import subMenu from '@/pages/index/components/sub-menu.vue'
	export default {
		components: {
			subMenu
		},
		props: {
			value: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				showMenu: false,
				// activeIndex: 0,
				list: [{
						name: '大会官网',
						img: 'https://static.inclusionconf.com/static/images/chat/foot-icon1.png',
						activeImg: 'https://static.inclusionconf.com/static/images/chat/foot-icon1-active.png',
						isExpect: false,
						url: '/pages/index/index'
					},
					{
						name: '玩转外滩',
						img: 'https://static.inclusionconf.com/static/images/chat/foot-icon-new2.png',
						activeImg: 'https://static.inclusionconf.com/static/images/chat/foot-icon-new2-active.png',
						isExpect: true,
						// url: '/pages/nav/index'
					},
					{
						name: '参会行程',
						img: 'https://static.inclusionconf.com/static/images/chat/foot-icon4.png',
						activeImg: 'https://static.inclusionconf.com/static/images/chat/foot-icon4-active.png',
						url: '/pages/xingcheng/helperSec'
					},
					{
						name: '我的',
						img: 'https://static.inclusionconf.com/static/images/new/footer-new-icon5.png',
						activeImg: 'https://static.inclusionconf.com/static/images/chat/foot-icon5-active.png',
						isExpect: false,
						url: '/pages/voucher/index'
					},
				],
			}
		},
		watch: {
			'$store.state.showMenu': {
				handler(v) {
					this.showMenu = v
				},
				immediate: true
			},
		},
		methods: {
			Link(item) {
				if (item.url == '/pages/index/index') {
					this.$store.commit('setShowMenu', !this.showMenu)
					return
				}
				this.$store.commit('setShowMenu', false)
				if (!item.url) return
				uni.switchTab({
					url: item.url
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.foot-wap {
		box-sizing: content-box;
		background: #131840;
		display: flex;
		padding: 0 10rpx 30px;
		position: relative;
		z-index: 1;

		.foot-wap-item {
			flex: 1;
			padding-top: 25rpx;
			position: relative;

			&.expect {
				opacity: 0.3;
			}

			.img {
				width: 48rpx;
				height: 48rpx;
				display: block;
				margin: 0 auto;
			}

			p {
				font-size: 20rpx;
				font-weight: 400;
				line-height: 20rpx;
				color: rgba(255, 255, 255, 1);
				text-align: center;
				vertical-align: top;
				margin-top: 18rpx;
			}

			&.active {
				opacity: 1;

				p {
					color: #8A6DFF;
				}
			}

			.expect {
				position: absolute;
				left: calc(50% + 24rpx);
				top: 10rpx;
				width: 58rpx;
				height: 26rpx;
				background: url(https://static.inclusionconf.com/static/images/new/expect-bg.png);
				background-size: 100% 100%;
				font-size: 12rpx;
				font-weight: 400;
				letter-spacing: 0px;
				line-height: 26rpx;
				text-align: center;
				color: rgba(255, 255, 255, 1);
				font-family: AlibabaPuHuiTi_3_65_Medium;
			}
		}
	}
</style>